<template>
    <div  :class="['container', hasTopBorder && 'cell-top-border', hasBottomBorder && 'cell-bottom-border']" :style="McontainerStyle">
        <div class="cell-title" :style="MtitleStyle">
            <div style="flex-direction: row;">
                <text  style="color:#ff5d54;font-size:32px;">{{label}}</text>
                <text class="cell-title-t" :style="MtitleTextStyle">{{title}}</text>
            </div>
        </div>
        <div class="cell-input" :style="MinputAreaStyle">
            <input  :type="type" class="cell-input-i"
                    :style="MinputStyle" :max-length="maxLength" :value="value" @input="getVal"/>
        </div>
    </div>
</template>

<style>
    .container{
        flex-direction: row;
        background-color: white;
    }
    .cell-title{
        align-items: center;
        justify-content: center;
        width: 300px;
        flex-direction: row;
        padding-left: 20px;
    }

    .cell-title-t{
        font-size: 30px;
        color: #272727;
    }

    .cell-input{
        height:100%;
        justify-content: center;
        align-items: flex-end;
    }

    .cell-input-i{
        text-align: left;
        padding-right:20px;
        height:100%;
    }

    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 1px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }


</style>

<script>
    export default {
        components: {},
        props:{
            height:{
                type:Number,
                default: 90
            },
            value:{
                type:Number
            },
            hasTopBorder:{
                type: Boolean,
                default: false
            },
            hasBottomBorder:{
                type: Boolean,
                default: true
            },
            type:{
                type: String,
                default: 'text'
            },
            maxLength:{
                type: Number,
                default: 50
            },
            titleStyle:{
                type: Object
            },
            inputStyle:{
                type: Object
            },
            title:{
                type: String,
                default: 'text'
            },
            label:{
                type: String
            },
            labelStyle:{
                type: Object
            }
        },
        data: () => ({
            defaultTitleStyle: {
                width:300,
                fontSize:32,
                align:'left'
            },
            defaultInputStyle:{
                width:450,
                fontSize:32,
                color:'#666',
                align:'right'
            },
            defaultLabelStyle:{
                color:'#ff5d54',
                fontSize:32
            },
            MtitleStyle:{},
            MinputAreaStyle:{},
            MinputStyle:{},
            MtitleTextStyle:{},
            McontainerStyle:{}

        }),
        computed:{

        },
        methods: {
            getVal(e){
                this.$emit('getVal', e.value)
            }
        },
        created(){
            this.inputStyle = Object.assign({}, this.defaultInputStyle,this.inputStyle)
            this.titleStyle = Object.assign({}, this.defaultTitleStyle,this.titleStyle)
            this.labelStyle = Object.assign({}, this.defaultLabelStyle,this.labelStyle)


            var _style = {}

            var align = this.titleStyle.align
            if(align == 'left') {
                _style = {
                    justifyContent:'flex-start',
                }
            }else if(align == 'right'){

                _style.justifyContent = 'flex-end'

            }else{

                _style.justifyContent= 'center'
            }

            if(this.titleStyle.width) {
                _style.width = this.titleStyle.width
            }

            this.MtitleStyle = _style

            if(this.inputStyle.width) {
                this.MinputAreaStyle.width = this.inputStyle.width
            }


            var i_style = {}

            if(this.inputStyle.fontSize) {
                i_style.fontSize = this.inputStyle.fontSize
            }

            if(this.inputStyle.width) {
                i_style.width = this.inputStyle.width
            }
            if(this.inputStyle.color) {
                i_style.color = this.inputStyle.color
            }


            var align = this.inputStyle.align

            if(align) {
                i_style.textAlign = align
            }

            this.MinputStyle = i_style


            if(this.titleStyle.fontSize) {
                this.MtitleTextStyle.fontSize = this.titleStyle.fontSize
            }

            this.McontainerStyle.height = this.height
        }
    }
</script>
